<script>
import QuarterlyAccountSearchForm from '@/mixins/quarterly-account-search-form'
import TableMixin from './table-mixin'
import QuarterlyAccountDetails from '@/mixins/quarterly-account-details'
import { TABLE_REPORTED, TABLE_RESOLVED, TABLE_REJECTED } from '@/config'
import { simpleAoa2Sheet } from '@/utils/sheet'
import pick from 'lodash/pick'

export default {
  name: 'quarterly-account',
  mixins: [QuarterlyAccountSearchForm, TableMixin, QuarterlyAccountDetails],
  data () {
    return {
      tableStatus: '',
    }
  },
  computed: {
    showButton () {
      const status = String(this.tableStatus)
      // 显示通过/驳回按钮的条件
      // 只有表状态是 已上报 才可以通过或驳回

      // 2024-1-19 去掉审核功能
      return status === TABLE_REPORTED
    },
    enterpriseText () {
      const enterprise = this.enterprise
      const enterpriseList = this.enterpriseList
      return (enterpriseList.find(v => +v.id === +enterprise) || {}).name
    }
  },
  methods: {
    resolve () {
      this.saveOrUpdate(TABLE_RESOLVED)
    },
    reject () {
      this.$prompt('退回理由：', '提示', {
        closeOnClickModal: false
      }).then(({ value }) => {
        this.saveOrUpdate(TABLE_REJECTED, value)
      }).catch(() => {})
    },
    exportExcel () {
      const year = this.year
      const quarter = this.quarter
      const enterpriseName = this.enterpriseText || ''
      const columns = this.columns
      const lists = this.lists
      const headers = columns.map(v => v.label)
      const fileName = `${enterpriseName}${year}年第${quarter}季度企业季度报表填报情况一览表.xlsx`
      const data = lists.map((v) => pick(v, columns.map(col => col.prop)))
      const aoa = [
        headers,
        ...data.map(item => {
          return columns.map(v => {
            return v.prop === 'name'
              ? item.name
              : this.statusText(item[v.prop])
          })
        }),
      ]

      simpleAoa2Sheet(aoa, fileName)
    },
  },
}
</script>

<template>
  <div class="padding flex direction-column width-100 height-100">
    <div class="search-form">
      <el-form inline>
        <el-form-item label="企业">
          <el-select v-model="enterprise" filterable clearable>
            <el-option v-for="option in enterpriseList" :key="option.id" :label="option.name" :value="option.id"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="年份">
          <el-date-picker type="year" :clearable="false" v-model="year" value="yyyy" value-format="yyyy"></el-date-picker>
        </el-form-item>
        <el-form-item label="季度">
          <el-select v-model="quarter">
            <el-option v-for="option in options" :key="option.value" v-bind="option"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
          <el-button type="primary" icon="el-icon-download" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="flex-1 overflow-auto dark-table-wrapper">
      <el-table
        v-loading="loading"  :data="lists"
        height="100%"
        :row-style="rowStyle"
        :header-cell-style="{
          color: 'white',
          backgroundColor: themeColor,
        }"
      >
        <div slot="empty" class="empty-lists">
          <i class="i-custom:search"></i>
          <span class="empty-text">暂无数据</span>
        </div>
        <el-table-column v-for="column in columns" :key="column.prop" v-bind="column">
          <template v-if="column.prop.indexOf('table') > -1" #default="{ row }">
            <el-link
              style="font-size: 12px;"
              :disabled="linkType(row[column.prop]) === 'warning'" :type="linkType(row[column.prop])"
              @click="edit(row, column.tableAccountId)"
            >
              {{statusText(row[column.prop])}}
            </el-link>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div v-if="showTableAccount" class="padding table-account-details">
      <component
        :is="tableComponent"
        ref="quarterlyAccountTable"
        :year="year" :quarter="quarter"
        :name="tableName" :columns="tableColumns" :t-id="tableAccountId"
        :enterprise-name="enterpriseName" :enterprise-id="enterpriseId"
        :is-government="true"
        readonly
      >
        <template #title="{ title }">
          <div class="flex align-center">
            <el-button type="primary" icon="el-icon-back" circle @click="back(true)"></el-button>
            <h2 class="margin-horizontal-auto" style="font-weight: normal;">{{title}}</h2>
            <template v-if="showButton">
              <el-button v-if="false" type="primary" @click="resolve">通过</el-button>
              <el-button type="danger" @click="reject">退回</el-button>
            </template>
          </div>
        </template>
      </component>
    </div>
  </div>
</template>
